// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import moment from 'moment'

// antd 按需加载
import { Tabs, Toast, Portal, List, Switch, Checkbox, WhiteSpace } from '@ant-design/react-native';
const Item = List.Item;
const Brief = Item.Brief;

// 引入 处理数据 所需文件
import { orderDetail } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RefreshScrollView, RnButton, OrderOperation, Layout } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { order } from '../../util/images.js';
import { press, size, ScreenWidth, countDown, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage, borderTop } from '../../util/utils.js'

class OrderInfo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      data: {},
      payment: {},
      payEndTime: '',
      payEnd: '',
    }
  }

  componentDidMount() {
    this.orderDetail()
  }



  // 收货地址列表 /delivery/address/list
  orderDetail(options) {
    const { order: { orderNo } } = this.props
    this.loading = Toast.loading('加载中', 0)
    orderDetail({ orderNo }).then(res => {
      console.log(res)
      Portal.remove(this.loading)
      this.setState({
        data: res.data.order,
        payment: res.data.payment
      })
      if (res.data.order.status == 1) {
        this.setState({
          payEndTime: res.data.order.payEndTime
        })
        this.time = setInterval(() => {
          let payEnd = countDown(res.data.order.payEndTime)
          if (payEnd) {
            this.setState({
              payEnd
            })
          } else {
            this.onRefresh()
          }
        }, 1000)
      }
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  componentWillUnmount() {
    clearInterval(this.time)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.refresh) {
      this.orderDetail()
    }
  }

  onRefresh = () => {
    const { order: { orderNo } } = this.props
    this.setState({ refreshing: true });
    orderDetail({ orderNo }).then(res => {
      this.setState({
        refreshing: false
      })
    }).catch(error => {
      this.setState({
        refreshing: false
      })
    })
  }


  renderStatus(order) {
    if (order.status == 1) { return '待付款' }
    if (order.status == 2) { return '待发货' }
    if (order.status == 3) { return '待收货' }
    if (order.status == 4) { return '已完成' }
    if (order.status == 5) { return '已取消' }
  }

  renderOrderInfo() {
    const { data, payEnd, payment } = this.state
    if (!data.id) {
      return
    }
    return (
      <View style={{}}>
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingVertical: 30,
          paddingHorizontal: 15,
          backgroundColor: '#000000'
        }}>
          <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>{this.renderStatus(data)}</Text>
          {data.status == 1 && <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>剩余：{payEnd}</Text>}
        </View>

        {/* <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          backgroundColor: '#fff',
          padding: 15
        }}>
          <View style={{
            flex: 1
          }}>
            <View style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginBottom: 8
            }}>
              <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, marginRight: 15 }}>{submitOrderAddress.consignee}</Text>
              <Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, marginRight: 15 }}>{submitOrderAddress.phone}</Text>
            </View>
            <View style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}>
              <Text style={{ fontSize: 14, color: '#61676F', marginRight: 12, flex: 1 }}>{submitOrderAddress.fullAddress}</Text>
            </View>
          </View>
        </View> */}

        <View style={{
          backgroundColor: '#fff',
          borderRadius: 6,
          overflow: 'hidden',
          borderWidth: 0,
          borderTopWidth: .5,
          borderBottomWidth: .5,
          borderColor: '#D9D9D9',
          marginTop: 20
        }}>
          <View style={{
          }}>
            <TouchableOpacity>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingHorizontal: 15
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>商品信息</Text>
                <Icon name="angle-right" size={14} color={'#61676F'} />
              </View>
            </TouchableOpacity>
          </View>
          <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
          {data.orderGoodsList.map((item, index) => (
            <View key={index} style={{
              ...borderTop(),

            }}>
              <View
                style={{
                  flexDirection: 'row',
                  padding: 15
                }}
              >
                <View style={{
                  width: 80,
                }}>
                  <CacheImage
                    resizeMod={"contain"}
                    style={{
                      width: 80,
                      height: 80,
                    }}
                    source={{ uri: `${pathHead}${item.goodsMainPic}` }}

                  />
                </View>
                <View style={{
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  height: 80,
                  marginLeft: 10,
                  flex: 1
                }}>
                  <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, }} numberOfLines={1} ellipsizeMode={'tail'}>{item.goodsName}</Text>
                  <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }} numberOfLines={1} ellipsizeMode={'tail'}>{item.goodsAttribute}</Text>
                  <View style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}>
                    <Text style={{ fontSize: 14, color: '#E5C67B', lineHeight: 30, }}>¥{item.goodsPrice}</Text>
                    <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>x{item.goodsNumber}</Text>
                  </View>
                </View>
              </View>
              {item.appraise == 0 && data.status == 4 && (
                <View
                  style={{
                    marginLeft: 15,
                    ...borderTop(),
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingVertical: 10,
                    paddingHorizontal: 15,
                    background: '#fff'
                  }}
                >
                  <TouchableOpacity
                    onPress={() => { Actions.goodsAppraise({ order: data, goods: item }) }}
                    style={{
                      width: 80,
                      height: 30,
                      marginRight: 15,
                      borderRadius: 4,
                      borderWidth: 0.5,
                      borderColor: '#F04844',
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>发布评论</Text>
                  </TouchableOpacity>
                </View>
              )}
            </View>
          ))}
        </View>
        <View style={{
          backgroundColor: '#fff',
          borderRadius: 6,
          overflow: 'hidden',
          borderWidth: 0,
          borderTopWidth: .5,
          borderBottomWidth: .5,
          borderColor: '#D9D9D9',
          marginTop: 20,
        }}>
          <View style={{
          }}>
            <TouchableOpacity>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingHorizontal: 15
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>订单信息</Text>
                <Icon name="angle-right" size={14} color={'#61676F'} />
              </View>
            </TouchableOpacity>
          </View>
          <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
          <List>
            <Item extra={`¥${data.orderMoney}`} arrow="empty">订单金额</Item>
            <Item extra={data.orderCv} arrow="empty">订单CV</Item>
            <Item extra={data.orderNo} arrow="empty">订单号</Item>
            <Item extra={data.postage} arrow="empty">运费</Item>
          </List>
        </View>
        <View style={{
          backgroundColor: '#fff',
          borderRadius: 6,
          overflow: 'hidden',
          borderWidth: 0,
          borderTopWidth: .5,
          borderBottomWidth: .5,
          borderColor: '#D9D9D9',
          marginTop: 20,
        }}>
          <View style={{
          }}>
            <TouchableOpacity>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingHorizontal: 15
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>收货信息</Text>
                <Icon name="angle-right" size={14} color={'#61676F'} />
              </View>
            </TouchableOpacity>
          </View>
          <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
          <List>
            <Item extra={data.consignee} arrow="empty">收件人</Item>
            <Item extra={data.phone} arrow="empty">联系电话</Item>
            <Item extra={data.deliveryAddress} arrow="empty">收货地址</Item>
          </List>
        </View>
        {payment && payment.money && (
          <View style={{
            backgroundColor: '#fff',
            borderRadius: 6,
            overflow: 'hidden',
            borderWidth: 0,
            borderTopWidth: .5,
            borderBottomWidth: .5,
            borderColor: '#D9D9D9',
            marginTop: 20,
          }}>
            <View style={{
            }}>
              <TouchableOpacity>
                <View style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  paddingHorizontal: 15
                }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 32, }}>付款信息</Text>
                  <Icon name="angle-right" size={14} color={'#61676F'} />
                </View>
              </TouchableOpacity>
            </View>
            <View style={{ height: .5, backgroundColor: '#D9D9D9' }}></View>
            <List>
              <Item extra={payment.money} arrow="empty">支付金额</Item>
              <Item extra={payment.payName} arrow="empty">支付方式</Item>
              <Item extra={payment.paymentTime} arrow="empty">支付时间</Item>
            </List>
          </View>
        )}
        <View style={{ height: 20 }}></View>
      </View>
    )
  }

  renderOrderNav() {
    const { data } = this.state
    if (!data.id) {
      return
    }
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingVertical: 10,
          paddingHorizontal: 15,
          background: '#fff'
        }}
      >
        <View style={{}}>
          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>应付金额：¥{data.orderMoney}</Text>
        </View>
        <OrderOperation order={data} orderType="info" onOperationEnd={() => {

        }} />
      </View>
    )
  }

  render() {
    const { refreshing } = this.state
    return (
      <Layout
        style={{ backgroundColor: '#fff' }}
        header={<Status />}
        footer={this.renderOrderNav()}
      >
        <NavBar
          title="订单详情"
          back={true}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          {this.renderOrderInfo()}
        </RefreshScrollView>
      </Layout>
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(OrderInfo))
